<template>
  <div class="chart_item">
    <div class="elec-trend">
      <div class="elec-trend-title">{{ title }}</div>
      <div class="button-group">
        <button :class="['switch-button', dataSourse === 'week' ? 'system-button-selected': '']" @click="setSourse('week')">周</button>
        <button :class="['switch-button', dataSourse === 'month' ? 'system-button-selected' :'']" @click="setSourse('month')">月</button>
      </div>
    </div>
    <div class="chart_frame">
      <vechart :options="options" />
    </div>
  </div>
</template>

<script>
export default {
  components: {
    vechart: () => import('@components/charts/Vechart.vue')
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    options1: {
      type: Object,
      default: () => {}
    },
    options2: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dataSourse: 'week'
      // options: { ...this.options1 }
    }
  },
  computed: {
    options() {
      return this.dataSourse === 'week' ? this.options1 : this.options2
    }
  },
  created() {
    this.setSourse('week')
    // this.$nextTick(() => {
    // this.options = this.options1
    // })
  },
  methods: {
    setSourse(val) {
      this.dataSourse = val
      // if (val === 'week') {
      //   this.options = this.options1
      // } else {
      //   this.options = this.options2
      // }
    }
  }
}
</script>

<style scoped>
.chart_item{
  flex: 1;
  display: flex;
  flex-flow: column;
}
.elec-trend{
  width: 95%;
  display: flex;
  flex-basis: 10%;
  justify-content: space-between;
  border-bottom: 1px solid #aaa;
  margin: 1rem 0;
}
.elec-trend-title{
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 3rem;
}
.switch-button{
  width: 2.8rem;
  height: 2.8rem;
  text-align: center;
  line-height: 2.2rem;
  color: #fff;
  border: 1px solid #fff;
  background: transparent;
  outline: none;
  margin-left: 1rem;
}
.system-button-selected{
  background: #00f4ff;
  color: #0b1c4a;
}
.chart_frame{
  flex-basis: 90%;
  width: 100%;
  min-height: 20rem;
}
</style>
